<form nz-form id="ActionEdit" *ngIf="editableAction">
    <div class="nzSegment">
            <nz-row>
                <nz-col [nzSpan]="7">
                    <nz-form-item>
                        <nz-form-label>Name</nz-form-label>
                        <nz-form-control>
                            <input *ngIf="edit;" nz-input type="text" name="actionName" [(ngModel)]="editableAction.name"
                                   (keydown)="editableAction.hasChanged = true; keyEvent($event)">
                            <span *ngIf="!edit;" class="inline">{{editableAction.name}}</span>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="10">
                    <nz-form-item>
                        <nz-form-label>Description</nz-form-label>
                        <nz-form-control>
                             <textarea *ngIf="edit;" nz-input [disabled]="!edit" name="actionDescription"
                                       [(ngModel)]="editableAction.description" rows="{{getDescriptionHeight()}}"
                                       (keydown)="editableAction.hasChanged = true; keyEvent($event)"></textarea>
                            <pre *ngIf="!edit;" class="inline">{{editableAction.description}}</pre>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="3">
                    <label nz-checkbox id="enabled_action_{{editableAction.id}}" name="enabled"
                           [(ngModel)]="editableAction.enabled"  (change)="editableAction.hasChanged = true"
                            [disabled]="!edit">Enabled</label>
                </nz-col>
                <nz-col [nzSpan]="4">
                    <a class="pointing"
                       (click)="prepareEditRequirements(); requirementModalVisible = true">
                        {{ editableAction.requirements.length + ' '}}{{'common_requirements' | translate }}
                    </a>
                    <nz-modal [nzVisible]="requirementModalVisible" nzTitle="Action requirements" nzWidth="1300px"
                              (nzOnCancel)="requirementModalVisible = false">
                        <div *nzModalContent class="modalContent">
                            <app-requirements-list [workerModels]="workerModels" [suggest]="suggest"
                                                   [requirements]="editableAction.requirements" [edit]="edit"
                                                   (onChange)="editableAction.hasChanged = true" (event)="requirementEvent($event)">
                            </app-requirements-list>
                            <div class="requirementForm" *ngIf="edit && pipeline">
                                <app-requirements-form [workerModels]="workerModels" [suggest]="suggest"
                                                       [config]="configRequirements"
                                                       (event)="requirementEvent($event)">
                                </app-requirements-form>
                            </div>
                        </div>
                        <div *nzModalFooter>
                            <button nz-button (click)="requirementModalVisible = false;parseRequirements();">Close</button>
                        </div>
                    </nz-modal>
                </nz-col>
            </nz-row>
    </div>

    <div class="subtitle normalStep">
        <h3 class="inline">Job steps<span *ngIf="steps">{{ ' (' + steps.length + ')'}}</span></h3>
        <div class="alignRight" *ngIf="steps && steps.length > 0">
            <button nz-button (click)="collapsed = !collapsed">
                <ng-container *ngIf="collapsed">
                    <span nz-icon nzType="eye-invisible" nzTheme="outline"></span>
                    {{'common_hide_all' | translate}}
                </ng-container>
                <ng-container *ngIf="!collapsed">
                    <span nz-icon nzType="eye" nzTheme="outline"></span>
                    {{'common_show_all' | translate}}
                </ng-container>
            </button>
        </div>
    </div>
    <div class="nzSegment" *ngIf="steps.length > 0 && publicActions" [class.off]="!editableAction.enabled">
        <div class="dragula-container" [dragula]="'bag-nonfinal'" [(dragulaModel)]="steps" *ngIf="steps">
            <div *ngFor="let step of steps; let idxStep = index" class="step" [class.off]="!step.enabled">
                <app-action-step [action]="editableAction" [step]="step" [edit]="edit" [suggest]="suggest"
                    [publicActions]="publicActions" [collapsed]="collapsed" [order]="idxStep" [keys]="keys"
                    (keydown)="keyEvent($event)" (removeEvent)="stepManagement($event)">
                </app-action-step>
                <hr>
            </div>
        </div>
    </div>
    <nz-alert nzType="info" nzMessage="There is no step."  *ngIf="steps.length === 0 && stepsReady"></nz-alert>
    <nz-spin *ngIf="!stepsReady" nzTip="Loading steps..."></nz-spin>
</form>
<nz-layout class="bottomBtnsWrapper"
     *ngIf="edit && !(pipeline && pipeline.previewMode)">
    <div nz-row *ngIf="publicActions.length > 0">
        <div nz-col nzSpan="24">
            <app-action-step-form [actions]="publicActions" (onEvent)="stepManagement($event)"></app-action-step-form>
        </div>
    </div>
    <div nz-row *ngIf="!editableAction.showAddStep">
        <div nz-col nzSpan="20">
            <button name="updateBtn"
                    nzType="primary"
                    nz-button
                    (click)="sendActionEvent('update')"
                    [disabled]="!editableAction.hasChanged || editableAction.loading"
                    [nzLoading]="editableAction.loading" nzBlock>
                <i nz-icon nzType="save" nzTheme="outline"></i>
                <span *ngIf="!editPipelineMode">Save</span>
                <span *ngIf="editPipelineMode">Apply</span>
            </button>
        </div>
        <div nz-col nzSpan="4">
            <button nz-button nz-dropdown class="menuBtn" [nzDropdownMenu]="menu" nzPlacement="topRight" nzTrigger="click" name="menuBtn">
                <i nz-icon nzType="ellipsis" nzTheme="outline"></i>
            </button>
            <nz-dropdown-menu #menu="nzDropdownMenu" >
                <ul nz-menu>
                    <li nz-menu-item>
                        <button nz-button nzBlock nzType="primary"
                                (click)="$event.stopPropagation(); initActionFromJob()">
                            <i nz-icon nzType="share-alt" nzTheme="outline"></i>Init a new action from job
                        </button>
                    </li>
                    <li nz-menu-item>
                        <button nz-popconfirm nzDanger nzBlock
                                name="deleteBtn"
                                nzPopconfirmTitle="Are you sure you want to delete this action?"
                                (nzOnConfirm)="sendActionEvent('delete')"
                                nzPopconfirmPlacement="topLeft"
                                nz-button>
                            <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
                        </button>
                    </li>
                </ul>
            </nz-dropdown-menu>
        </div>
    </div>
</nz-layout>
